<template>
	<div>
		<el-main>
			<el-table :data="xj" height="500" border style="width: 100%">
				<el-table-column prop="intime" label="排班日期" width="140">
				</el-table-column>
				<el-table-column prop="name" label="姓名" width="120">
				</el-table-column>
				<el-table-column prop="address" label="地址" width="260">
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" width="200">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="100">
				</el-table-column>
				<el-table-column prop="job" label="工作安排" width="200">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<el-button size="mini" @click="UP(scope.$index,scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="del(scope.$index,xj)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 弹出修改 -->
			<el-dialog title="信息修改" :visible.sync="dialogVisible" width="40%">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="日期" prop="intime">
						<el-input v-model="ruleForm.intime"></el-input>
					</el-form-item>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="ruleForm.name"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
					</el-form-item>
					<el-form-item label="联系电话">
						<el-input v-model="ruleForm.phone"></el-input>
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-radio-group v-model="ruleForm.sex">
							<el-radio label="男"></el-radio>
							<el-radio label="女"></el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="工作安排">
						<el-input v-model="ruleForm.job"></el-input>
					</el-form-item>
					<span slot="footer" class="dialog-footer">
						<el-button type="primary" @click="updata()">确 定</el-button>
						<el-button @click="dialogVisible = false">取 消</el-button>
					</span>
				</el-form>
			</el-dialog>
		</el-main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Index: '',
				xj: [],
				//tableData: Array(20).fill(item),
				dialogVisible: false,
				ruleForm: {
					intime: '',
					name: '',
					address: '',
					phone: '',
					sex: '',
					job: ''
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 5,
							message: '长度在 2 到 5 个字符',
							trigger: 'blur'
						}
					],
					address: [{
						required: true,
						message: '请输入地址',
						trigger: 'change'
					}],
					phone: [{
						required: true,
						message: '请输入电话',
						trigger: 'change'
					}],
					job: [{
						required: true,
						message: '请输入工作安排',
						trigger: 'change'
					}],
				}
			}
		},
		methods: {
			del(index, rows) {
				/* 删除 */
				rows.splice(index, 1);
			},
			UP(index, row) {
				//获取index
				this.Index = index;
				this.dialogVisible = true;
				this.ruleForm = Object.assign({}, row); //将数据传入编辑页面
				console.log(index);
			},
			updata() {
				this.dialogVisible = false;
				// this.ruleForm =	this.xj[this.Index];
				console.log(this.ruleForm);
				// this.xj[this.index] = this.ruleForm;
				this.ruleForm = {
					intime: '',
					name: '',
					address: '',
					phone: '',
					sex: '',
					job: ''
				}
			},
			getdata() {
				this.$axios({
					method: 'get', //请求方式
					url: 'http://10.1.8.189:3000/api/user/all', //请求路径
					params: {} //发送的数据
				}).then((res) => {
					console.log(res.data);
					this.xj = res.data;
				}).catch((err) => console.log(err));
			}
		},
		mounted() {
			this.getdata()
		}
	};
</script>

<style>
	el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
	}

	.el-aside {
		color: #333;
	}

	.el-dialog__header {
		text-align: center;
	}

	.el-dropdown-selfdefine {
		font-size: 14px;
	}

	.lis {
		float: right;
		font-size: 24px;
		font-weight: bold;
		margin-top: 10px;
	}

	.el-dropdown {
		/* margin-top: 15px; */
		cursor: pointer;
		text-align: center;
	}
</style>
